<template>
  <div class="factory-page">
    <header>
      <h3>生产看板</h3>
      <div class="show-time">{{ this.time }}</div>
    </header>
    <div class="panel">
      <div class="column">
        <div class="table-left-1 border">
          <TableLeft1 />
        </div>
        <div class="draw-left-1 border">
          <DrawLeft1 />
        </div>
      </div>
      <div class="column">
        <div class="main-box border">
          <MainBox />
        </div>
      </div>
      <div class="column">
        <div class="draw-right-1 border">
          <DrawRight1 />
        </div>
        <div class="draw-right-2 border">
          <DrawRight2 />
        </div>
        <div class=" border draw-right-3">
          <DrawRight3 />
        </div>
      </div>
    </div>
    <div class="bottom-table border">
      <div class="table-bottom-1 border">
        <TableBottom1 />
      </div>
      <div class="table-bottom-2 border">
        <TableBottom2 />
      </div>
    </div>
  </div>
</template>
<script>
import dayjs from "dayjs";
import {
  TableLeft1,
  DrawLeft1,
  MainBox,
  DrawRight1,
  DrawRight2,
  DrawRight3,
  TableBottom1,
  TableBottom2,
} from "./components/index";
export default {
  components: {
    TableLeft1,
    DrawLeft1,
    MainBox,
    DrawRight1,
    DrawRight2,
    DrawRight3,
    TableBottom1,
    TableBottom2,
  },
  data() {
    return {
      time: "",
    };
  },
  mounted() {
    this.timeRecorder();
  },
  methods: {
    timeRecorder() {
      let t = null;
      let that = this;
      t = setTimeout(time, 1000); //開始运行
      function time() {
        clearTimeout(t); //清除定时器
        that.time = "当前时间:" + dayjs().format("YYYY-MM-DD HH:mm:ss");
        t = setTimeout(time, 1000); //设定定时器，循环运行
      }
    },
  },
};
</script>
<style lang="less" scoped>
.factory-page {
  width: 100%;
  background: url("https://tva1.sinaimg.cn/large/007S8ZIlly1ghwei2h80pj31hc0u00tx.jpg");
      background-repeat: no-repeat;
  background-size: cover;
  line-height: 1.15;
  min-height: 13rem;
  display: flex;
  flex-flow: column;
  color: #ffffff;
  header {
    position: relative;
    height: 1.25rem;
    line-height: 1.25rem;
    background: url("../../assets/images/head_bg.png") no-repeat top center;
    background-size: 100% 100%;

    h3 {
      font-size: 0.475rem;
      color: #fff;
      text-align: center;
      line-height: 1rem;
      margin: 0;
    }

    .show-time {
      position: absolute;
      top: 0;
      right: 0.375rem;
      line-height: 0.9375rem;
      font-size: 0.25rem;
      color: rgba(255, 255, 255, 0.7);
    }
  }
  .panel {
    display: flex;
    padding: 0.125rem 0.125rem 0;
    min-width: 1024px;
    // max-width: 1920px;
    height: 8.525rem;
    .column {
      flex: 3;
      display: flex;
      flex-flow: column;
    }
    .column:nth-child(2) {
      flex: 5;
      overflow: hidden;
    }
  }
  .bottom-table {
    flex: 1;
    display: flex;
    flex-flow: row;
    .table-bottom-1 {
      flex: 1;
    }
    .table-bottom-2 {
      flex: 1;
    }
  }
  .border {
    border: 1px transparent solid;
    margin: 5px;
    box-sizing: border-box;
    border-image: linear-gradient(to bottom, #abdcff 10%, #0396ff 100%) 1 10;
  }

  .table-left-1 {
    height: 40%;
  }
  .draw-left-1 {
    height: 60%;
  }
  .main-box {
    height: 100%;
  }
  .draw-right-1 {
    flex: 1;
  }
  .draw-right-2 {
    flex: 1;
  }
  .draw-right-3 {
    flex: 1.5;
  }
}
</style>
